*, *::before, *::after {
box-sizing: border-box;
}

* {
margin: 0;
}

body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}

input, button, textarea, select {
font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}

h1 {
font-size: 72px;
background: linear-gradient(red, blue);
}

h2 {
font-size: 45px;
background: linear-gradient(blue, red);
}

h1, h2 {
background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
letter-spacing: 1.5px;
}

.group {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: 1fr 2fr;
column-gap: 30px;
margin-top: 100px;
padding: 40px;
}

.links {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
width: 100%;
background: rgba(1, 1, 123, 0.9);
padding: 15px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
top: 0;
}

.links img {
height: 100px;
}

img {
max-width: 250px;
justify-self: center;
}

a {
padding: 10px 20px;
background-color: rgb(0, 0, 255);
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
transition: 0.3s ease;
text-align: center;
}

a:hover {
background-color: hotpink;
transform: scale(1.1);
}

.intro {
background: linear-gradient(#a7dbe3, #e1f7f9);
border-radius: 16px;
max-width: 900px;
padding: 40px 50px;
margin: 60px;
box-shadow: 0 6px 18px rgba(0,0,0,0.15);
text-align: left;  
margin-left: auto;
margin-right: auto;
}

.intro h3 {
font-size: 1.8rem;
margin-bottom: 15px;
color: #003366; 
text-align: center; 
}

.intro p {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 25px;
color: black;
}

html, body {
background: linear-gradient( lightblue, rgb(215, 227, 236));
margin: 0;
font-family: Arial, sans-serif;
padding: 0;
overflow: hidden;
}

.scroll {
overflow: scroll;
background: linear-gradient( lightblue, rgb(215, 227, 236));
position: absolute;
height: 100%;
width: 100%;
overflow-x: scroll;
}